<template>
    <div class="app">
        <my-navbar title="报表明细"></my-navbar>
        <list>
			<refresh class="refresh" @refresh="onrefresh" @pullingdown="onpullingdown"
			         :display="refreshing ? 'show' : 'hide'">
			    <text class="indicator-text">Refreshing ...</text>
			    <loading-indicator class="indicator"></loading-indicator>
			</refresh>
            <cell>
                <div class="report_content_item" @click="detailClick(item.orderId)" v-for="item in orderForm">
                    <div class="report_content_item_top">
                        <text class="report_content_item_title mg-Bottom">{{item.consignee}}</text>
                        <text class="report_content_item_icon mg-Bottom mg_Left">{{item.phone}}</text>
                    </div>
                    <text class="report_content_item_address mg-Bottom">收货地址：{{item.address}}</text>
                    <text class="report_content_item_icon mg-Bottom">

                    </text>
                    <text class="report_content_item_icon mg-Bottom">规格：{{item.spec}}</text>
                    <div class="report_content_item_priceBox mg-Bottom">
                        <text class="report_content_item_icon">数量：x{{item.quantity|number}}件</text>
                        <text class="report_content_item_price">¥{{item.price|price}}</text>
                    </div>
                    <text class="report_content_item_icon mg-Bottom">优惠：¥{{item.discount|price}}</text>
                    <div class="report_content_item_botton">
                        <text class="report_content_item_bottonTitle">查看明细</text>
                    </div>
                </div>
       
            </cell>
			<loading v-if="orderForm.length>=5"  class="loading" @loading="onloading" :display="loadinging ? 'show' : 'hide'">
			    <text class="indicator-text">Loading ...</text>
			    <loading-indicator class="indicator"></loading-indicator>
			</loading>
        </list>
    </div>
</template>

<script>
    import myNavbar from '../../components/myNavbar/myNavbar.vue'
	import {selectOrderDetailRP,selectWarehouseDetailRP} from '../../api/apiReport.js'

    export default {
        data(){
            return{
				id:'',
				pageNum:1,
				type:'',
				refreshing: false,
				loadinging: false,
				orderForm:[]
					
            }
        },
		created() {
			let params=app.config.params
			this.type=params.type
			this.id = params.id
			if(this.type=='order'){
				this.loadOrder()
			}else{
				this.loadWareHouse()
			}
			
		},
		filters: {
		    price(value) {
		        var toFixedNum = Number(value).toFixed(3);
		        var realVal = toFixedNum.substring(0, toFixedNum.toString().length - 1);
		        return realVal;
		    },
		    number(value) {
		        var toFixedNum = Number(value).toFixed(0);
		        return toFixedNum;
		    }
		},
        components: {
            myNavbar
        },
		methods:{
			onrefresh(event) {
			    var _this = this
			    this.refreshing = true
			    setTimeout(() => {
			        _this.pageNum = 1;
			        _this.orderForm = []
					if(this.type=='order'){
						_this.loadOrder()
					}else{
						_this.loadWareHouse()
					}
			        this.refreshing = false
			    }, 2000)
			},
			onpullingdown(event) {
			    console.log("dy: " + event.dy)
			    console.log("pullingDistance: " + event.pullingDistance)
			    console.log("viewHeight: " + event.viewHeight)
			    console.log("type: " + event.type)
			},
			onloading (event) {
			    var _this = this
			
			    this.loadinging = true
			    setTimeout(() => {
			        _this.pageNum = _this.pageNum + 1;
			        if(this.type=='order'){
			        	_this.loadOrder()
			        }else{
			        	_this.loadWareHouse()
			        }
			        this.loadinging = false
			    }, 2000)
			},
			detailClick(data){
				eeui.openPage({
					url: 'root://pages/order/orderDetails.js',
					params: data,
					statusBarType: 'immersion',
					statusBarStyle: false
				}, result => {
				
				});
			},
			loadWareHouse(){
				if(this.pageNum==1){
					this.orderForm=[]
				}
				selectWarehouseDetailRP({
					productId:this.id,
					pageNum:this.pageNum,
				}).then(res=>{
					res.data.data.forEach(item=>{
						this.orderForm.push(item)
					})
				})
			},
			loadOrder(){
				if(this.pageNum==1){
					this.orderForm=[]
				}
				selectOrderDetailRP({
					productId:this.id,
					pageNum:this.pageNum,
				}).then(res=>{
					res.data.data.forEach(item=>{
						this.orderForm.push(item)
					})
					
				})
			},
		}
    }
</script>

<style scoped>
    .app {
        background-color: rgba(248, 248, 248, 0.8);
        flex: 1;
    }
    .report_content_item{
        width: 700px;
        background-color: white;
        border-radius: 10px;
        margin-left: 25px;
        position: relative;
        margin-top: 25px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        box-sizing: border-box;
        padding-left: 30px;
        padding-right: 30px;
        padding-top: 30px;
		margin-bottom: 20px;
    }
    .report_content_item_title{
        font-size: 36px;
        /*width: 640px;*/
        /*lines:1;*/
        text-overflow: ellipsis;
        margin-top: 4px;
        line-height: 36px;
    }
    .report_content_item_right{
        display: flex;
        flex-direction: column;
        align-items: center;
        position: absolute;
        right: 30px;

    }
    .report_content_item_priceBox{
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        width: 640px;

    }
    .report_content_item_price{
        font-size: 28px;
    }
    .report_content_item_icon{
        font-family: iconfont2;
        font-size: 28px;
        color: rgba(0,0,0,0.2);
    }
    .report_content_item_address{
        font-family: iconfont2;
        font-size: 28px;
        color: rgba(0,0,0,0.2);
        width: 640px;
        lines:2;
        text-overflow: ellipsis;
    }
    .mg-Bottom{
        margin-bottom: 10px;
    }
    .mg_Left{
        margin-left: 10px;
    }
    .report_content_item_botton{
        border-top-style: solid;
        border-top-width: 1px;
        border-top-color: rgba(0,0,0,0.1);
        display: flex;
        justify-content: center;
        align-items: center;
        width: 640px;
        padding-top: 20px;
        padding-bottom: 20px;
        margin-top: 20px;
    }
    .report_content_item_bottonTitle{
        font-size: 26px;
        color: rgba(83,168,255,1);
    }
    .report_content_item_top{
        display: flex;
        flex-direction: row;
        /*background-color: red;*/
        align-items: flex-end;
    }
	.indicator {
	    margin-top: 16px;
	    height: 40px;
	    width: 40px;
	    color: blue;
	}
	.loading {
	    width: 750px;
	    display: -ms-flex;
	    display: -webkit-flex;
	    display: flex;
	    -ms-flex-align: center;
	    -webkit-align-items: center;
	    -webkit-box-align: center;
	    align-items: center;
	}
	.refresh {
	    width: 750px;
	    display: -ms-flex;
	    display: -webkit-flex;
	    display: flex;
	    -ms-flex-align: center;
	    -webkit-align-items: center;
	    -webkit-box-align: center;
	    align-items: center;
	}
	
	.indicator-text {
	    color: #888888;
	    font-size: 42px;
	    text-align: center;
	}
</style>
